<template>
    <div>
        <br><h3 align="left">数据筛选</h3>
        <el-form :inline="true" :model="Form" class="demo-form-inline" align="left" style="margin-top: 1%;">
            <el-form-item label="类别名称：">
                <el-input v-model="Form.TypeName" placeholder="类别名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="GetPayTypeList()">查询</el-button>
                <el-button type="success" @click="add()">添加</el-button>
                <el-button type="danger" @click="onBatchDel()">批量删除</el-button>
                <el-button type="info" @click="derive(checkList)">导出</el-button>
            </el-form-item>
        </el-form>
        <h3 align="left">数据列表</h3>
        <el-table :data="payTypeList" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="typeCode" label="类别编号">
            </el-table-column>
            <el-table-column prop="typeName" label="类别名称">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime.substr(0, 19).replace('T', ' ') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="warning" @click="upd(scope.row.id)">编辑</el-button>
                    <el-button type="danger" @click="onDel(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="财务类别添加" :visible.sync="dialogVisible" width="35%">
            <el-form :model="payTypeForm" :rules="rules" ref="ruleForm" label-width="100px" style="margin-left: 10%;"
                class="demo-ruleForm">
                <el-form-item label="类别编号：" prop="TypeCode" style="text-align: left;">
                    <el-input v-model="payTypeForm.TypeCode" style="width: 260px;"></el-input>
                </el-form-item>
                <el-form-item label="类别名称：" prop="TypeName" style="text-align: left;">
                    <el-input v-model="payTypeForm.TypeName" style="width: 260px;"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="Remarks" style="text-align: left;">
                    <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="payTypeForm.Remarks"
                        style="width: 400px;">
                    </el-input>
                </el-form-item>
                <br>
                <el-form-item style="text-align: center ;">
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="财务类别修改" :visible.sync="dialogVisible1" width="35%">
            <el-form :model="editForm" ref="ruleForm" label-width="100px" style="margin-left: 10%;" class="demo-ruleForm">
                <el-form-item label="类别编号：" prop="TypeCode" style="text-align: left;">
                    <el-input v-model="editForm.typeCode" style="width: 260px;"></el-input>
                </el-form-item>
                <el-form-item label="类别名称：" prop="TypeName" style="text-align: left;">
                    <el-input v-model="editForm.typeName" style="width: 260px;"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="Remarks" style="text-align: left;">
                    <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="editForm.remarks"
                        style="width: 400px;">
                    </el-input>
                </el-form-item>
                <br>
                <el-form-item style="text-align: center ;">
                    <el-button type="primary" @click="edit('ruleForm')">保存</el-button>
                    <el-button @click="dialogVisible1 = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import XLSX from 'xlsx';
import { GetPayTypeListApi, AddPayTypeApi, DeletePayTypeApi, DeletePayTypeListApi, GetPayTypeByIdApi, EditPayTypeApi } from "@/api/FinanceManage/PayType";
import { autoGenerateCode } from "@/utils/utils";
export default {
    data() {
        return {
            // 支付类型列表
            payTypeList: [],
            // 弹窗显示状态
            dialogVisible: false,
            // 弹窗显示状态
            dialogVisible1: false,
            // 表单
            Form: {
            },
            // 支付类型表单
            payTypeForm: {
            },
            // 编辑表单
            editForm: {
                CreateTime:""
            },
            // 校验规则
            rules: {
                // 类别名称
                TypeName: [
                    { required: true, message: '请输入类别名称', trigger: 'blur' },
                ],
            },
            // 多选
            checkList: []
        }
    },
    //计算属性
    computed: {
        sid() {
            //声明一个空数组
            var sid = [];
            //遍历checkList数组
            this.checkList.forEach((item) => {
                //将item.id添加到sid数组中
                sid.push(item.id);
            })
            //返回sid数组
            return sid;
        },
    },
    methods: {
        //获取财务类别列表
        GetPayTypeList() {
            let params = {
                name: this.Form.TypeName,
            };
            GetPayTypeListApi(params).then(res => {
                this.payTypeList = res.data.data;
            });
        },
        //添加类别
        add() {
            this.dialogVisible = true;
        },
        submitForm(formName) {
            // 校验表单
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 添加表单数据
                    let params = {
                        TypeCode: this.payTypeForm.TypeCode,
                        TypeName: this.payTypeForm.TypeName,
                        Remarks: this.payTypeForm.Remarks,
                    };
                    // 调用添加接口
                    AddPayTypeApi(params).then(res => {
                        if (res.data.code == 0) {
                            // 添加成功
                            this.$message.success("添加成功");
                            this.dialogVisible = false;
                            this.GetPayTypeList();
                        } else {
                            // 添加失败
                            this.$message.error("添加失败");
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            // 重置表单
            this.$refs[formName].resetFields();
        },
        upd(id) {
            this.dialogVisible1 = true;
            let params = {
                Id: id
            };
            GetPayTypeByIdApi(params).then(res => {
                this.editForm = res.data.data;
            });
        },
        edit() {
            let params = {
                id: this.editForm.id,
                TypeCode: this.editForm.typeCode,
                TypeName: this.editForm.typeName,
                Remarks: this.editForm.remarks,
                CreateTime: this.editForm.createTime
            };
            EditPayTypeApi(params).then(res => {
                if (res.data.code == 0) {
                    this.$message.success("修改成功");
                    this.dialogVisible1 = false;
                    this.GetPayTypeList();
                } else {
                    this.$message.error("修改失败");
                }
            });
        },
        //选择改变
        handleSelectionChange(val) {
            this.checkList = val;
        },
        //删除
        onDel(id) {
            // 弹出确认框，询问是否删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 删除分类
                let params = {
                    id: id
                };
                DeletePayTypeApi(params).then(res => {
                    if (res.data.code == 0) {
                        this.$message.success("删除成功");
                        this.GetPayTypeList();
                    } else {
                        this.$message.error("删除失败");
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //批量删除
        onBatchDel() {
            if (this.checkList.length == 0) {
                this.$message.error("请选择要删除的数据");
                return;
            }
            // 弹出确认框，询问是否删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 删除分类
                let params = {
                    delId: this.sid.toString(),
                };
                DeletePayTypeListApi(params).then(res => {
                    if (res.data.code == 0) {
                        this.$message.success("删除成功");
                        this.GetPayTypeList();
                    } else {
                        this.$message.error("删除失败");
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //导出
        derive(checkList) {
            const filteredData = checkList.map(row => {
                return {
                    '类别编号': row.typeCode,
                    '类别名称': row.typeName,
                    '创建时间': row.createTime,
                    '备注': row.remarks
                }
            });
            const worksheet = XLSX.utils.json_to_sheet(filteredData);

            worksheet['!cols'] = [{ wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }, { wpx: 100 }];

            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

            XLSX.writeFile(workbook, '财务类别列表.xlsx');
        },
    },
    mounted() {
        //获取支付类型列表
        this.GetPayTypeList();
        //自动生成支付类型编码
        this.payTypeForm.TypeCode = autoGenerateCode('LB');
    },
}
</script>
<style></style>